<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复杂数据的处理computed语法</title>
</head>
<body>
  <div id="app">
    <!--1. 插值语法实现字符拼接-->
    <h2>{{fullName}}</h2> <!--不需要加()-->
    <!--2. 数值分类-->
    <h2>{{}}</h2>
    <!--3. 文本单词进行反转-->
    <h2>{{}}</h2>
  </div>
  <script src="../lib/vue.js"></script>
  <script>
    // 使用vue
    const app = Vue.createApp({
      template: ``
      ,
      data: function(){
        return {
          firstName: "kobe",
          lastName: "jjj",
          score: 80,
          message: "my name is kobe"
        }
      },
      methods: {

      },
      computed: {
        // 1. 计算属性默认的是一个函数
        fullName: function() {
          return this.firstName + " " + this.lastName
        }
      }
    }
    )
    // 挂载 
    app.mount("#app")
  </script>

</body>
</html>
